<template>
  <div>
    <Modal v-model="isShow" :title="modalTitle" width="700" :mask-closable="false" :closable="false">
      <Form :model="formSummary">
        <FormItem label="总结活动过程" prop="activity_process">
          <Input v-model="formSummary.activity_process" type="textarea" :rows="4" style="width:300px"
                 placeholder="总结过程"></Input>
        </FormItem>
        <FormItem label="上传活动图片" prop="activity_img">
          <upload-img ref="imgService"></upload-img>
       <!--   <div class="demo-upload-list" :key="index" v-for="(item, index) in uploadList">
            <template v-if="item.status === 'finished'">
              <img :key="index" :src="item.url">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload
            ref="upload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            type="drag"
            action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <Modal title="查看图片" v-model="visible">
            <img :src="'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/doc/' + activity_img" v-if="visible"
                 style="width: 100%">
          </Modal>-->
        </FormItem>
        <FormItem label="活动参与度" prop="activity_participation">
          <Input v-model="formSummary.activity_participation" style="width:300px" placeholder="参与度"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="error" @click="cancel">取消</Button>
        <Button type="primary" @click="saveHandle" :loading="btnLoading">保存</Button>
        <Button type="success" @click="submitSummary">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import UploadImg from './components/upload-img/index'
import { SaveActivitySummary } from '@/api/activitySummary'
export default {
  name: 'ActivitySummary',
  components: { UploadImg },
  props: {
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    summaryData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      formSummary: {},
      visible: false,
      uploadList: [],
      row: {},
      btnLoading: false
    }
  },
  methods: {
    handleView (url) {
      this.activity_img = url
      this.visible = true
    },
    handleRemove (file) {
      const fileList = this.uploadList
      this.uploadList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess (res, file) {
      file.url = res.url
      file.name = res.title
      this.formSummary.activity_img = file.url
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件格式' + file.name + ' 不正确,请选择jpg或png.'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件  ' + file.name + ' 太大，不能超过2M.'
      })
    },
    handleBeforeUpload () {
      const check = this.uploadList.length < 3
      if (!check) {
        this.$Notice.warning({
          title: '最多可以上传3张图片'
        })
      }
      return check
    },
    cancel () {
      this.$emit('cancel')
    },
    saveHandle () {
      SaveActivitySummary(this.formSummary).then(ret => {
        console.log(ret, '添加接口')
      })
    },
    submitSummary () {}
  }
}
</script>

<style scoped>
  /deep/ .ivu-modal-header {
    border-bottom: none;
  }
  /deep/ .ivu-modal-footer {
    border-top: none;
  }
</style>
